<!--
 * 测试API连接页面
 * 功能：测试前端与后端API的连接状态
 * 作者：AI Assistant
 * 创建时间：2025-08-25
-->

<template>
  <div class="test-api-container">
    <el-card class="test-card">
      <template #header>
        <div class="card-header">
          <span>API连接测试</span>
        </div>
      </template>
      
      <div class="test-section">
        <h3>健康检查</h3>
        <el-button 
          type="primary" 
          @click="testHealth" 
          :loading="healthLoading"
        >
          测试健康检查
        </el-button>
        <div v-if="healthResult" class="result-box">
          <pre>{{ JSON.stringify(healthResult, null, 2) }}</pre>
        </div>
      </div>
      
      <el-divider />
      
      <div class="test-section">
        <h3>搜索API测试</h3>
        <el-input 
          v-model="searchQuery" 
          placeholder="输入搜索关键词"
          style="width: 300px; margin-right: 10px;"
        />
        <el-button 
          type="success" 
          @click="testSearch" 
          :loading="searchLoading"
        >
          测试搜索
        </el-button>
        <div v-if="searchResult" class="result-box">
          <pre>{{ JSON.stringify(searchResult, null, 2) }}</pre>
        </div>
      </div>
      
      <el-divider />
      
      <div class="test-section">
        <h3>问答API测试</h3>
        <el-input 
          v-model="qaMessage" 
          placeholder="输入问题"
          style="width: 300px; margin-right: 10px;"
        />
        <el-button 
          type="warning" 
          @click="testQA" 
          :loading="qaLoading"
        >
          测试问答
        </el-button>
        <div v-if="qaResult" class="result-box">
          <pre>{{ JSON.stringify(qaResult, null, 2) }}</pre>
        </div>
      </div>
      
      <el-divider />
      
      <div class="test-section">
        <h3>阅读器API测试</h3>
        <el-input 
          v-model="readerUrl" 
          placeholder="输入网页URL"
          style="width: 300px; margin-right: 10px;"
        />
        <el-button 
          type="info" 
          @click="testReader" 
          :loading="readerLoading"
        >
          测试阅读器
        </el-button>
        <div v-if="readerResult" class="result-box">
          <pre>{{ JSON.stringify(readerResult, null, 2) }}</pre>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { searchAPI, qaAPI, readerAPI } from '../api'

// 响应式数据
const healthLoading = ref(false)
const healthResult = ref(null)

const searchLoading = ref(false)
const searchQuery = ref('Vue 3')
const searchResult = ref(null)

const qaLoading = ref(false)
const qaMessage = ref('什么是Vue 3？')
const qaResult = ref(null)

const readerLoading = ref(false)
const readerUrl = ref('https://vuejs.org')
const readerResult = ref(null)

// 测试健康检查
const testHealth = async () => {
  healthLoading.value = true
  healthResult.value = null
  
  try {
    const response = await fetch('http://127.0.0.1:5000/api/health')
    const data = await response.json()
    healthResult.value = data
    ElMessage.success('健康检查成功')
  } catch (error) {
    console.error('健康检查失败:', error)
    healthResult.value = { error: error.message }
    ElMessage.error('健康检查失败')
  } finally {
    healthLoading.value = false
  }
}

// 测试搜索API
const testSearch = async () => {
  if (!searchQuery.value.trim()) {
    ElMessage.warning('请输入搜索关键词')
    return
  }
  
  searchLoading.value = true
  searchResult.value = null
  
  try {
    const result = await searchAPI.webSearch(searchQuery.value)
    searchResult.value = result
    ElMessage.success('搜索测试成功')
  } catch (error) {
    console.error('搜索测试失败:', error)
    searchResult.value = { error: error.message }
    ElMessage.error('搜索测试失败')
  } finally {
    searchLoading.value = false
  }
}

// 测试问答API
const testQA = async () => {
  if (!qaMessage.value.trim()) {
    ElMessage.warning('请输入问题')
    return
  }
  
  qaLoading.value = true
  qaResult.value = null
  
  try {
    const messages = [{ role: 'user', content: qaMessage.value }]
    const result = await qaAPI.ask(messages)
    qaResult.value = result
    ElMessage.success('问答测试成功')
  } catch (error) {
    console.error('问答测试失败:', error)
    qaResult.value = { error: error.message }
    ElMessage.error('问答测试失败')
  } finally {
    qaLoading.value = false
  }
}

// 测试阅读器API
const testReader = async () => {
  if (!readerUrl.value.trim()) {
    ElMessage.warning('请输入网页URL')
    return
  }
  
  readerLoading.value = true
  readerResult.value = null
  
  try {
    const result = await readerAPI.readUrl(readerUrl.value)
    readerResult.value = result
    ElMessage.success('阅读器测试成功')
  } catch (error) {
    console.error('阅读器测试失败:', error)
    readerResult.value = { error: error.message }
    ElMessage.error('阅读器测试失败')
  } finally {
    readerLoading.value = false
  }
}
</script>

<style scoped>
.test-api-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.test-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 18px;
}

.test-section {
  margin-bottom: 20px;
}

.test-section h3 {
  margin-bottom: 15px;
  color: #409eff;
}

.result-box {
  margin-top: 15px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  max-height: 300px;
  overflow-y: auto;
}

.result-box pre {
  margin: 0;
  font-family: 'Courier New', monospace;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>